<template>
  <div class="tool-faq">
    <h2 class="bar-title break-words">
      <span class="text-gray-1000 font-semibold text-34 break-words w-full">
        {{$t('detail_tool_faqs',{toolName: toolName})}}
      </span>
    </h2>
    <div class="mt-8">
      <dl class="space-y-6 divide-y divide-gray-1600 hover:divide-y">
        <div v-for="(faq, key) in faqs"
          :key="`faq-${key}`"
          class="pt-6">
          <dt class="flex items-start justify-between text-left text-xl leading-6 font-semibold text-gray-1000 hover:text-purple-1300 cursor-pointer"
            :class="{'text-purple-1300': faq.show,'opacity-90': faq.show }"
            :key="key"
            @click="show(key)">
            <span>{{faq.q}}</span>
            <span class="flex justify-center h-8 ml-8 -mt-1">
              <svg xmlns="http://www.w3.org/2000/svg"
                class="h-8 w-8"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                v-if="!faq.show">
                <path stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 6v12m6-6H6"></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg"
                class="h-8 w-8"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                v-if="faq.show">
                <path stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M18 12H6"></path>
              </svg>
            </span>
          </dt>
          <dd class="mt-2 text-base text-gray-1000"
            v-if="faq.show">
            {{faq.a}}
          </dd>
        </div>
      </dl>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ToolDetailFaq',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    faq: {
      type: Array,
      default: () => [],
    },
    toolName: {
      type: String,
      default: '',
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  watch: {
    faq: {
      handler(val) {
        if (val) {
          let faqs = JSON.parse(JSON.stringify(val))
          faqs.forEach((item) => {
            item.show = false
          })
          this.faqs = faqs
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      faqs: [],
    }
  },
  methods: {
    show(key) {
      this.faqs[key].show = !this.faqs[key].show
    },
  },
}
</script>